<!DOCTYPE html>
<html lang="zh-CnN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="calculator J_calculator">
    <p>结果：<span class="result">0</span></p>
    <div class="input-group">
      <input type="text" placeholder="第一个数字" value="0">
      <input type="text" placeholder="第二个数字" value="0">
    </div>
    <div class="button-group">
      <button data-method="plus">+</button>
      <button data-method="minus">-</button>
      <button data-method="mul">*</button>
      <button data-method="div">/</button>
    </div>
  </div>
</body>
<script>
  // var oCalculator = document.getElementsByClassName('J_calculator')[0],
  //     oResult = document.getElementsByClassName('result')[0],
  //     finput = document.getElementsByTagName('input')[0],
  //     sinput = document.getElementsByTagName('input')[1],
  //     oBtnGroup = document.getElementsByClassName('button-group')[0];
  
  // oBtnGroup.addEventListener('click', bindClick, false);
  
  // function bindClick(e){
  //   var e = e || window.event,
  //       tar = e.target || e.srcElement,
  //       tarName = tar.tagName.toLowerCase();
    
  //   if(tarName === 'button'){
  //     var method = tar.getAttribute('data-method'),
  //         fval = parseInt(finput.value.replace(/\s+/g, '')) || 0,
  //         sval = parseInt(sinput.value.replace(/\s+/g, '')) || 0;
      
  //     switch(method){
  //       case 'plus':
  //         oResult.innerText = fval + sval;
  //         break;
  //       case 'minus':
  //       oResult.innerText = fval - sval;
  //         break;
  //       case 'mul':
  //       oResult.innerText = fval * sval;
  //         break;
  //       case 'div':
  //       oResult.innerText = fval / sval;
  //         break;
  //       default:
  //         break;
  //     }
  //   }
  // }

  var tools = (function(){
    function clear(str){
      return parseInt(str.replace(/\s+/g, '')) || 0;
    }

    function getTarget(e){
      var e = e || window.event,
          tar = e.target || e.srcElement;
      return tar;
    }

    return {
      clear: clear,
      getTarget: getTarget,
    }
  })()


  ;(function(){
    var oCalculator = document.getElementsByClassName('J_calculator')[0],
      oResult = document.getElementsByClassName('result')[0],
      finput = document.getElementsByTagName('input')[0],
      sinput = document.getElementsByTagName('input')[1],
      oBtnGroup = document.getElementsByClassName('button-group')[0];
    
    var init = function(){
      bindEvent();
    }

    function bindEvent(){
      oBtnGroup.addEventListener('click', onBtnClick, false);
    }

    function onBtnClick(e){
      var tar = tools.getTarget(e);
          tarName = tar.tagName.toLowerCase();
      
      if(tarName === 'button'){
        var method = tar.getAttribute('data-method'),
            fval = tools.clear(finput.value),
            sval = tools.clear(sinput.value);
        renderResult(compute(method, fval, sval));
      }
    }

    function renderResult(result){
      oResult.innerText = result;
    }

    function compute(method, fval, sval){
      switch(method){
        case 'plus':
          return fval + sval;
          break;
        case 'minus':
          return fval - sval;
          break;
        case 'mul':
          return fval * sval;
          break;
        case 'div':
          return fval / sval;
          break;
        default:
          break;
      }
    }
    
    /** 
     * @constructor Text
     * @description 这个是一个测试函数 
     */
    var Text = function(){
      this.name = "xxx";
    }
    window.Text = Text;

    init();
  })()

  var edd = new Text()




  

</script>
</html>